<style lang="less">
    .page_style {
        margin-top: 10px;
        text-align: right;
    }
    .bench_search {
        margin-bottom: 10px;
    }
    .nopadding .ivu-table-cell {
        padding: 0px 0px;
    }
    .item1{
        line-height: 40px;
    }
    .code {
        width: 300px;
        margin-left: 10px;
    }
    .sousuo {
        margin-left: 10px;
    }

    .add {
        margin-left: 10px;
    }
    .actionBtn{
        margin-left: 10px;
    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
<template>
    <wl-content-top>
        <template slot="header">
            <Form>
                <FormItem :model="selectObj">
                    <FormItem>
                        <Col span="6">
                            <span>类型：</span>
                            <Select v-model="selectObj.company_type" style="width: 75%;">
                                <Option value="">全部</Option>
                                <Option value="0">咨询</Option>
                                <Option value="1">验收</Option>
                                <Option value="2">评估</Option>
                            </Select>
                        </Col>
                        <span class="name">企业名称：</span>
                        <Input v-model="selectObj.company_name" placeholder="请输入企业名称" class="code"/>
                        <Button type="primary" class="add" @click="modaladd">
                            <Icon type="ios-add"/>
                            创建
                        </Button>
                        <Button type="success" v-model="selectObj.company_name" @click="selectBySelectObj"
                                class="sousuo">
                            <Icon type="ios-search"/>
                            搜索
                        </Button>
                    </FormItem>
                </FormItem>
            </Form>
        </template>
        <template slot="body">
        <div class="table">
            <Table border :columns="columns1" :data="datalist" :loading="loading">
                <template slot-scope="{ row }" slot="action">
                    <Button type="primary" size="small" @click="edit(row)">编辑</Button>
                    <Button type="info" size="small" class="actionBtn" @click="show(row)">详情</Button>
                </template>
            </Table>
        </div>
            <div class="page_style">
                <Page show-total :current="currentPageNo" :page-size="currentPageSize"
                      :total="pageObj.totalRecord" @on-change="getPageNo"/>
            </div>
        <Modal
                v-model="modal2"
                :title="title1"
                class="modal"
                @on-ok="saves('paramData2')"
                :loading="btnLoading">
            <!--                @on-cancel="cancel('formItem')"-->
            <Form :label-width="140"  ref="paramData2" :model="paramData2" :rules="ruleValidate">
                <FormItem label="企业类型：" prop="company_type">
                    <Select v-model="paramData2.company_type" class="input">
                        <Option value="0">咨询类</Option>
                        <Option value="1">验收类</Option>
                        <Option value="2">评估类</Option>
                    </Select>
                </FormItem>
                <FormItem label="企业名称：" prop="company_name">
                    <Input v-model="paramData2.company_name" placeholder="请输入企业名称" class="input"></Input>
                </FormItem>
                <FormItem label="组织机构代码证号：" prop="organization_code">
                    <Input v-model="paramData2.organization_code" placeholder="请输入组织机构代码证号" class="input"></Input>
                </FormItem>
                <FormItem label="企业地址：" prop="adress">
                    <Input v-model="paramData2.adress" placeholder="请输入企业地址" class="input"></Input>
                </FormItem>
                <FormItem label="企业法人：" prop="contact_name">
                    <Input v-model="paramData2.contact_name" placeholder="请输入企业法人" class="input"></Input>
                </FormItem>
                <FormItem label="联系电话：" prop="contact_mobile">
                    <Input v-model="paramData2.contact_mobile" placeholder="请输入联系电话" class="input"></Input>
                </FormItem>
                <FormItem label="企业邮箱：" prop="contact_email">
                    <Input v-model="paramData2.contact_email" placeholder="请输入企业邮箱" class="input"></Input>
                </FormItem>
                <FormItem label="企业简介：" prop="date">
                    <Input v-model="paramData2.date" placeholder="请输入企业简介" type="textarea" :autosize="{minRows: 2,maxRows: 5}"  class="input"></Input>
                </FormItem>
                <FormItem label="三证图片：" prop="img">
                    <div class="demo-upload-list" :key="index" v-for="(item, index) in uploadList">
                        <template v-if="item.status === 'finished'">
                            <img :key="index" :src="item.url">
                            <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                            </div>
                        </template>
                        <template v-else>
                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                        </template>
                    </div>
                    <Upload
                            ref="upload"
                            :show-upload-list="false"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="2048"
                            :on-format-error="handleFormatError"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="handleBeforeUpload"
                            type="drag"
                            action="//dlqt.juyouhx.com/Api/Api/ObjectToOss"
                            style="display: inline-block;width:58px;">
                        <div style="width: 58px;height:58px;line-height: 58px;">
                            <Icon type="ios-camera" size="20"></Icon>
                        </div>
                    </Upload>
                    <Modal title="查看图片" :footer-hide="modalFooter" v-model="visible">
                        <img :src="'https://skv4.oss-cn-hangzhou.aliyuncs.com/app/doc/' + img" v-if="visible"
                             style="width: 100%">
                    </Modal>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="modal1" title="详情" width="700" cancel-text="关闭"
               @on-cancel="modal = false" ok-text="确定" style="position:relative;">
            <Form ref="paramData" :model="paramData"  >
                <Row class="item1">
                    <Col span="6" style="text-align: right" class="">企业类型:</Col>
                    <Col span="12" offset="1">{{descData[paramData.company_type]}}</Col>
                </Row>
                <Row class="item1">
                    <Col span="6" style="text-align: right" class="red-name">企业名称:</Col>
                    <Col span="12" offset="1">{{paramData.company_name}}</Col>
                </Row>
                <Row class="item1">
                    <Col span="6" style="text-align: right" class="">组织机构代码证号:</Col>
                    <Col span="12" offset="1">{{paramData.organization_code}}</Col>
                </Row>
                <Row class="item1">
                    <Col span="6" style="text-align: right" class="red-name">企业地址:</Col>
                    <Col span="12" offset="1">{{paramData.adress}}</Col>
                </Row>
                <Row class="item1">
                    <Col span="6" style="text-align: right" class="red-name">企业法人:</Col>
                    <Col span="12" offset="1">{{paramData.contact_name}}</Col>
                </Row>
                <Row class="item1">
                    <Col span="6" style="text-align: right" class="red-name">联系电话:</Col>
                    <Col span="12" offset="1">{{paramData.contact_mobile}}</Col>
                </Row>
                <Row class="item1">
                    <Col span="6" style="text-align: right" class="red-name">企业邮箱:</Col>
                    <Col span="12" offset="1">{{paramData.contact_email}}</Col>
                </Row>
                <Row class="item1">
                    <Col span="6" style="text-align: right" class="red-name">企业简介:</Col>
                    <Col span="12" offset="1">{{paramData.date}}</Col>
                </Row>
                <Row class="item1">
                    <Col span="6" style="text-align: right">三证图片:</Col>
                    <Col span="12" offset="1" class="ivu-form-item-content">
                        <img :src="paramData.organization_img" width="100%"/> </Col>
                </Row>
            </Form>
        </Modal>
        </template>
    </wl-content-top>
</template>

<script>
// import { date2str } from '@/api/enterprise'
import { getCompanyMsgList, insertCompanyInfo } from '@/api/demo'
export default {
  data () {
    const validateImg = (rule, value, callback) => {
      // console.log('头图校验')
      if (this.uploadList.length !== 1) {
        callback(new Error('请输入三证图片'))
      } else {
        callback()
      }
    }
    return {
      ruleValidate: {
        company_type: [
          { required: true, message: '类型不能为空', trigger: 'change' }
        ],
        company_name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        organization_code: [
          { required: true, message: '项目名编号不能为空', trigger: 'blur' }
        ],
        adress: [
          { required: true, message: '所属机构不能为空', trigger: 'blur' }
        ],
        contact_name: [
          { required: true, message: '项目描述不能为空', trigger: 'blur' }
        ],
        contact_mobile: [
          { required: true, message: '项目描述不能为空', trigger: 'blur' }
        ],
        contact_email: [
          { required: true, message: '项目描述不能为空', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '项目描述不能为空', trigger: 'blur' }
        ],
        img: [
          { required: true, validator: validateImg, trigger: 'blur' }
        ]
      },
      selectObj: {
        pageNo: 1,
        pageSize: 10,
        company_type: '',
        company_name: ''
      },
      company_id: '',
      btnLoading: true,
      loading: false,
      title1: '',
      uploadList: [],
      organization_img: '',
      currentImg: '',
      visible: false,
      modalFooter: true,
      modal1: false,
      modal2: false,
      currentPageNo: 1,
      currentPageSize: 10,
      descData: ['咨询类', '验收类', '评估类'],
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        state: ''
      },
      tab_index: 0,
      paramData2: {},
      paramData: {},
      datalist: [],
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: 150,
          align: 'center'

        },
        {
          title: '企业名称',
          key: 'company_name',
          align: 'center',
          width: 260

        },
        {
          title: '企业类型',
          key: 'company_type',
          align: 'center',
          width: 170,
          render: (h, params) => {
            let company_type = params.row.company_type
            return h('span', this.descData[company_type])
          }
        },
        {
          title: '联系人',
          key: 'contact_name',
          align: 'center',
          width: 180
        },
        {
          title: '联系电话',
          key: 'contact_mobile',
          align: 'center',
          width: 200
        },
        {
          title: '操作',
          slot: 'action',
          width: 220,
          align: 'center'
        }
      ]
    }
  },
  methods: {
    // 编辑弹出窗
    edit (e) {
      this.company_id = e.company_id
      this.title1 = '编辑项目'
      this.paramData2 = e
      this.modal2 = true
      this.btnLoading = true
      this.$refs.upload.fileList.splice(0, 1)
    },
    // 添加弹出窗
    modaladd () {
      this.paramData2 = {}
      this.modal2 = true
      this.title1 = '添加项目'
      this.btnLoading = true
      this.$refs.upload.fileList.splice(0, 1)
    },
    show (row) {
      this.modal1 = true
      this.paramData = row
    },
    selectBySelectObj () {
      getCompanyMsgList(this.selectObj).then(ret => {
        this.datalist = ret.data.data.results
        console.log(this.selectObj.project_name, 'ddd')
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.findCompanyList()
    },
    cancel () {
      this.modal = false
      this.paramData2 = {}
    },
    handleView (name) {
      this.img = name
      this.visible = true
      // console.log('预览图片', this.uploadList)
    },
    handleRemove (file) {
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess (res, file) {
      file.url = res.url
      file.name = res.title
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件格式' + file.name + ' 不正确,请选择jpg或png.'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件  ' + file.name + ' 太大，不能超过2M.'
      })
    },
    handleBeforeUpload () {
      const check = this.uploadList.length < 1
      if (!check) {
        this.$Notice.warning({
          title: '最多可以上传1张图片'
        })
      }
      return check
    },
    saves (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let imgUrl = ''
          if (this.uploadList[0] === undefined) {
            if (this.title1 === '编辑商户') {
              imgUrl = this.currentImg
            } else {
              imgUrl = ''
            }
          } else {
            imgUrl = this.uploadList[0].url
          }
          const data1 = {
            company_id: this.company_id,
            organization_img: imgUrl,
            company_type: this.paramData2.company_type,
            company_name: this.paramData2.company_name,
            organization_code: this.paramData2.organization_code,
            adress: this.paramData2.adress,
            contact_name: this.paramData2.contact_name,
            contact_mobile: this.paramData2.contact_mobile,
            contact_email: this.paramData2.contact_email,
            date: this.paramData2.date
          }
          insertCompanyInfo(data1).then(ret => {
            if (ret.data.errcode === 0) {
              this.modal2 = false
              this.findCompanyList()
              this.success()
            } else {
              this.btnLoading = false
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
          this.btnLoading = false
        }
      })
    },
    // 初始化列表
    findCompanyList (state) {
      let data = {
        state: state, pageNo: this.pageObj.pageNo, pageSize: this.pageObj.pageSize
      }
      getCompanyMsgList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.datalist = ret.data.data.results
          this.pageObj.totalRecord = ret.data.data.totalRecord
        }
      })
    },
    success () {
      this.$Message.success('操作成功')
    },
    change (pageNo) {
      this.currentPageNo = pageNo
      console.log(this.currentPageNo)
      this.findCompanyList('')
    },
    // 切换tab页
    changeTab (name) {
      this.currentPageNo = 1
      this.currentPageSize = 10
      this.findCompanyList(this.tab_index)
    }
  },
  mounted () {
    this.findCompanyList()
    this.uploadList = this.$refs.upload.fileList
  }
}
</script>

<style scoped>

</style>
